<template>
  <div class="login">
    <h2>Essential LOGIN</h2>
    <div :key="index" v-for="(item,index) in attrs">
      {{item.msg}}
      <span v-for="(ck,index2) in item.data" :key="index2">
        <input @input="selectOk(index,index2)" :checked="ck.checked" type="checkbox">
        {{ck.text}}
      </span>
    </div>
    <table border="">
      <tr>
        <th :key="index" v-for="(th,index) in heard">{{th}}</th>
      </tr>
      <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
      </tr>
      <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      heard: ['颜色', '尺寸', '布料', 'sku商场价格', '市场价格', '商品库存', '库存预警', 'sku编号', 'crud'],
      msg: 'LOGIN',
      attrs: [
        {
          msg: '颜色',
          data: [
            {
              'text': '红色',
              checked: false
            },
            {
              'text': '蓝色',
              checked: false
            },
            {
              'text': '绿色',
              checked: false
            },
            {
              'text': '黄色',
              checked: false
            }
          ]
        },
        {
          msg: '尺寸',
          data: [
            {
              'text': '33',
              checked: false
            },
            {
              'text': '34',
              checked: false
            },
            {
              'text': '35',
              checked: false
            },
            {
              'text': '36',
              checked: false
            }
          ]
        },
        {
          msg: '布料',
          data: [
            {
              'text': '纤维',
              checked: false
            },
            {
              'text': '纯棉',
              checked: false
            },
            {
              'text': '纯羊毛',
              checked: false
            }
          ]
        }
      ]
    }
  },
  mounted() {
    console.log(this.attrs)
  },
  methods: {
    selectOk(index, index2) {
      var vm = this
      vm.attrs[index].data[index2].checked = !vm.attrs[index].data[index2].checked
      // vm.heard = ['颜色', '尺寸', '布料', 'sku商场价格', '市场价格', '商品库存', '库存预警', 'sku编号', 'crud']
      let heard = ['sku商场价格', '市场价格', '商品库存', '库存预警', 'sku编号', 'crud']
      var arr = []
      vm.attrs.forEach((val, index) => {
        val.data.forEach((v, i) => {
          if (v.checked) {
            arr.push({msg: val.msg, index: index, text: v.text})
          }
        })
      })
      var arr3 = [{msg: '颜色', index: 0, text: '蓝色'}, {msg: '颜色', index: 0, text: '红色'}, {msg: '颜色', index: 0, text: '灰色'}]
      var arr4 = [{msg: '尺寸', index: 1, text: '33'}, {msg: '尺寸', index: 1, text: '34'}]
      var arr5 = [{msg: '布料', index: 2, text: '纤维'}, {msg: '布料', index: 2, text: '羊毛'}]
      // arr.forEach((val, index) => {
      //   console.log(val)
      // })
      var arr10 = []
      for (var i = 0; i < arr3.length; i++) {
        // 迭代器
        // var json = {color: arr3[i].text, size: '', sorce: '', price: '商品sku价格'}
        // console.log(arr3[i])
        for (var j = 0; j < arr4.length; j++) {
          // var json2 = {color: arr3[i].text, size: arr4[j].text, sorce: '', price: '商品sku价格'}
          // arr10.push(json2)
          for (var q = 0; q < arr5.length; q++) {
            console.log('1')
            // var json3 = {color: arr3[i].text, size: arr4[j].text, sorce: arr5[q].text, price: '商品sku价格'}
            // arr10.push(json3)
          }
        }
      }
      console.log(arr10)
      // arrs.forEach((arrs, index) => {
      //   for (var i = 0; i < arrs.length; i++) {
      //     console.log(arrs[i])
      //   }
      // })
      // console.log(arrs)
      // arr.sort(function (a, b) {
      //   return a[0].startDate - b[0].startDate;
      // })
      // function arrayUnique2(arr, name) {
      //   var hash = {}
      //   return arr.reduce(function (item, next) {
      //     hash[next[name]] ? '' : hash[next[name]] = true && item.push(next)
      //     return item
      //   }, [])
      // }

      // console.log(arrayUnique2(arr, 'index').concat(heard))
      // vm.attrs
      console.log(vm.attrs)
      // let arr_item = {price: '商品sku价格'}
      // console.log(heard)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login {
    /*background: orange;*/
  }

  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
